import React, { useState, useEffect } from 'react';
import { Sidebar } from 'react-vant';
import axios from "axios"

import { Image } from 'react-vant';

// import {useNavigate} from "react-router-dom"//跳详情用的

import withRouter from '../../utils/withRouter';
function Classify({router}) {
  let {navigate,param,location}=router
  const [arr, setarr] = useState([]);
  const [dataChildren, setdataChildren] = useState([])
  const [active, setActive] = useState(0);
  // const navigate=useNavigate();
  useEffect(() => {
    axios.get("/lists").then(res => {
      setarr(res.data.list);
      setdataChildren(res.data.list[0].Children)
    })
    
  }, [])
  //点击跳详情
 const dj=(val)=>{
console.log(val);
navigate(`/Detail/${val.id}`,{state:val})
  }
  
  //切换
  const setSlider = (v) => {
    setActive(v);
    setdataChildren(arr[v].children)
  }
  return (
    <div><Sidebar
      value={active}
      onChange={setSlider}
    >
      {
        arr && arr.map((item, index) => {
          return <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.title}>
            {
              dataChildren&&dataChildren.map((val,i)=>{
                //跳转详情
                return <div className='aa' key={i} onClick={()=>dj(val)}>

                  <div className="left">
                  <Image lazyload src={val.img} alt="" style={{width:'80px',height:'100px'}} />
                  </div>
                 <div className="right">
                 <p>{val.title}</p>
                  
                  <p>{val.price}</p>
                 </div>
                </div>
              })
            }
          </Sidebar.Item>
        })
      }


    </Sidebar></div>
  )
}

export default withRouter(Classify)